import React, { Component, useRef, useEffect, useState } from 'react'
import E from 'wangeditor'

const EditPage = () => {
  const mainRef = useRef<HTMLDivElement | null>(null)
  const [content, setContent] = useState<any>('')
  const [json, setJson] = useState<any>()

  const myEdit = useRef<any>(null)

  // 处理副作用函数
  useEffect(() => {
    if (mainRef.current) {
      myEdit.current = new E(mainRef.current)
      myEdit.current.create()
    }
  }, [])

  return (
    <div>
      EditPage
      <div id="main" ref={mainRef}></div>
      <button
        onClick={() => {
          console.log(myEdit.current.txt.html(), 'txt')
          setContent(myEdit.current.txt.html())
          setJson(myEdit.current.txt.getJSON())
          //
        }}
      >
        获取富文本内容
      </button>
      {console.log(json)}
      <div className="content" dangerouslySetInnerHTML={{ __html: content }}></div>
    </div>
  )
}

export default EditPage
